<template>
  <view class="oto-image" :style="[{ width: width, height: height }]">
    <image
      :class="showDefaultStyle ? 'image' : ''"
      :width="width"
      :height="height"
      @click="click"
      :src="src"
      :mode="mode"
    />
  </view>
</template>

<script>
  export default {
    props: {
      width: {
        type: [String, Number],
        default: '100%'
      },
      height: {
        type: [String, Number],
        default: ''
      },
      src: {
        type: String,
        default: ''
      },
      mode: {
        type: String,
        default: ''
      },
      showDefaultStyle: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      click(e) {
        this.$emit('click', e);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .oto-image {
    .image {
      width: 100%;
      height: 100%;
    }
  }
</style>
